<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>
<blockquote class="layui-elem-quote layui-text">
  进销管理
</blockquote>
<div class="layui-card layui-panel">
  <div class="layui-card-header">
    采购
  </div>
  <div class="layui-card-body">
    <form  action="http://localhost:8080/jxc01/obscurePro" method="post">
               <span>
               <input type="text" name="purchaseId" placeholder="采购编号" style="width: 120px;height: 28px" >
               <button class="layui-btn" type="submit">查找</button></span>
<!--      <button class="layui-btn"><a href="">添加</a></button>-->
      <button type="button" class="layui-btn layui-btn-primary" lay-on="page">添加</button>
    </form>
    <table class="layui-hide" id="ID-table-demo-data" lay-filter="test"></table>
  </div>
</div>
<!--选定条目，编辑已有数据-->
<form id="editForm" method="post" action="http://localhost:8080/jxc01/reviseprocurement" hidden = "hidden">
  <!--    <div style="margin:15px 5px 10px 5px"> 类别：<input type="text" id="edit_category"></div>-->
  <!--    <div style="margin:15px 5px 10px 5px"> 备注：<input type="text" height="30px" id="edit_annotation" maxlength="100"></div>-->
    <input type="text" id="id" name="id" hidden="hidden"/><br/>
    采购编号:<input type="text" id="purchaseId" name="purchaseId" placeholder="采购编号" value=""/><br/>
    采购员工:<select style="width: 100px " id="purchaseName" onchange="" name="purchaseName">
          <option value="张三">张三</option>
          <option value="张四">张四</option>
          <option value="张五">张五</option>
          <option value="张六">张六</option>
        </select><br/>
  采购商品:<select style="width: 100px " id="goodsName" onchange="" name="goodsName">
          <option value="苹果">苹果</option>
          <option value="小米手机">小米手机</option>
          <option value="方便面">方便面</option>
          <option value="冰箱">冰箱</option><br/>
          <option value="汽车">汽车</option><br/>
        </select><br/>
  所属类:<select style="width: 100px " id="classs" onchange="" name="classs">
          <option value="水果类">水果类</option>
          <option value="电子类">电子类</option>
          <option value="食品类">食品类</option>
          <option value="五谷类">五谷类</option>
          <option value="机械类">机械类</option>
        </select><br/>
  采购供应商:<input type="text" id="purchaseSupplierName" name="purchaseSupplierName" placeholder="采购供应商" value=""/><br/>
  规格:<select style="width: 100px " id="unit" onchange="" name="unit">
          <option value="斤">斤</option>
          <option value="件">件</option>
          <option value="个">个</option>
          <option value="辆">辆</option>
          <option value="台">台</option>
        </select><br/>
  采购数量:<input type="text" id="purchaseNum" name="purchaseNum" placeholder="采购数量" value=""/><br/>
  采购单价:<input type="text" id="unitPrice" name="unitPrice" placeholder="采购单价" value=""/><br/>
    总价:<input type="text" id="totalPrice" name="totalPrice" placeholder="总价" value=""/><br/>
    采购时间:<input type="text" id="purchaseTime" name="purchaseTime" placeholder="采购时间" value=""/><br/>
  状态:<select style="width: 100px " id="status" onchange="" name="status">
          <option value="完成">[0]完成</option>
          <option value="进行中">[1]进行中</option>
        </select><br/>
  备注:<input type="textarea" id="note" name="note" placeholder="描述信息" value=""/><br/>
  <input type="button" value="取消" style="float: right">
  <input type="submit" value="确认" style="float: right">
</form>
</body>
<script src="layui/layui.js"></script>
<script src="js/jquery-3.7.0.js"></script>
<script type="text/html" id="bar">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn  layui-btn-xs" lay-event="in">入库</a>
  <a class="layui-btn  layui-btn-xs" lay-event="back">退货</a>
</script>
<script>
  layui.use(function(){
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var util = layui.util;
    util.on('lay-on', {
      page: function(){
        // 页面层
        layer.open({
          type: 1,
          btn:['确定','取消'],
          area: ['420px', '240px'], // 宽高
          content: '<div style="padding: 11px;"><form action="http://localhost:8080/jxc01/addprocurement" method="post">\n' +
              '<input type="text" id="id" name="id" hidden="hidden"/><br/>        ' +
              '        采购编号:<input type="text" id="purchaseId" name="purchaseId" placeholder="采购编号" value=""/><br/>\n'+
              '        采购人:<select style="width: 100px " id="select" onchange="" name="purchaseName">\n' +
              '                <option value="张三">张三</option>\n' +
              '                <option value="张四">张四</option>\n' +
              '                <option value="张五">张五</option>\n' +
              '                <option value="张六">张六</option>\n' +
              '              </select><br/>\n' +
              '        采购商品:<select style="width: 100px " id="select" onchange="" name="goodsName">\n' +
              '                <option value="苹果">苹果</option>\n' +
              '                <option value="小米手机">小米手机</option>\n' +
              '                <option value="方便面">方便面</option>\n' +
              '                <option value="冰箱">冰箱</option><br/>\n' +
              '                <option value="汽车">汽车</option><br/>\n' +
              '              </select><br/>\n' +
              '        所属类:<select style="width: 100px " id="select" onchange="" name="classs">\n' +
              '                <option value="水果类">水果类</option>\n' +
              '                <option value="电子类">电子类</option>\n' +
              '                <option value="食品类">食品类</option>\n' +
              '                <option value="五谷类">五谷类</option>\n' +
              '                <option value="机械类">机械类</option>\n' +
              '              </select><br/>\n' +
              '        采购供应商:<input type="text" name="purchaseSupplierName" placeholder="采购供应商" value=""/><br/>\n' +
              '        规格:<select style="width: 100px " id="select" onchange="" name="unit">\n' +
              '                <option value="斤">斤</option>\n' +
              '                <option value="件">件</option>\n' +
              '                <option value="个">个</option>\n' +
              '                <option value="辆">辆</option>\n' +
              '                <option value="台">台</option>\n' +
              '              </select><br/>\n' +
              '        采购数量:<input type="text" name="purchaseNum" placeholder="采购数量" value=""/><br/>\n' +
              '        采购单价:<input type="text" name="unitPrice" placeholder="采购单价" value=""/><br/>\n' +
              '        采购总价:<input type="text" name="totalPrice" placeholder="采购总价" value=""/><br/>\n' +
              '        采购时间:<input type="text" name="purchaseTime" placeholder="采购时间" value=""/><br/>\n' +
              '        状态:<select style="width: 100px " id="select" onchange="" name="status">\n' +
              '                <option value="完成">[0]完成</option>\n' +
              '                <option value="进行中">[1]进行中</option>\n' +
              '              </select><br/>\n' +
              '        备注:<input type="textarea" name="note" placeholder="描述信息" value=""/><br/>\n' +
              '        <input type="submit" value="确认" style="float: right">\n' +
              '</form></div>'
        })
      }
    });
    // 提交事件
    form.on('submit(demo-submit)', function(data){
      var field = data.field; // 获取表单全部字段值
      var elem = data.elem; // 获取当前触发事件的元素 DOM 对象，一般为 button 标签
      var elemForm = data.form; // 获取当前表单域的 form 元素对象，若容器为 form 标签才会返回。
      // 显示填写结果，仅作演示用
      layer.alert(JSON.stringify(field), {
        title: '当前填写的字段值'
      });
      // 此处可执行 Ajax 等操作
      // …
      return false; // 阻止默认 form 跳转
    });
  });
  layui.use('table', function(){
    var table = layui.table;
    // 已知数据渲染
    var inst = table.render({
      elem: '#ID-table-demo-data',
        url:'http://localhost:8080/jxc01/queryProcurement',
        cols: [[ //标题栏
            {field: 'id', title: 'ID', width: 80, sort: true},
            {field: 'purchaseId', title: '采购编号', minWidth: 140},
            {field: 'purchaseName', title: '采购人', width: 100},
            {field: 'goodsName', title: '商品名称', width: 100},
            {field: 'classs', title: '所属类', minWidth: 80},
            {field: 'purchaseSupplierName', title: '采购供应商', width: 100},
            {field: 'unit', title: '计量单位', minWidth: 80},
            {field: 'purchaseNum', title: '采购数量', minWidth: 80},
            {field: 'unitPrice', title: '单价', minWidth: 100},
            {field: 'totalPrice', title: '总价', minWidth: 100},
            {field: 'purchaseTime', title: '采购时间', width: 180, sort: true},
            {field: 'status', title: '状态', width: 120},
            {field: 'note', title: '备注', width: 80},
            {field: 'operate', title: '操作', width: 240,toolbar:"#bar"}
        ]],
      //skin: 'line', // 表格风格
      //even: true,
      page: true, // 是否显示分页
      limits: [5, 10, 15],
      limit: 5 // 每页默认显示的数量
    });
    // 触发单元格工具事件
    table.on('tool(test)', function(obj){ // 双击 toolDouble
      var data = obj.data; // 获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象
      var jsonData = JSON.stringify(data);

      if(layEvent === 'edit'){
        layer.open({
          title: '编辑信息id:'+ data.id,
          type: 1,
          area: ['40%','40%'],
          content : $('#editForm'),
          btn: ['确定', '取消'],
          shade: [0.8, '#393D49'],
          success : function(layer,index) {
            //此处"#edit_username"需对应最上面的表单中的字段id="",val(data.username)这个对应数据库中的字段
              $("#id").val(data.id);
              $("#purchaseId").val(data.purchaseId);
            $("#purchaseName").val(data.purchaseName);
            // $("#edit_password").val(data.password);
            $("#goodsName").val(data.goodsName)
            $("#classs").val(data.classs);
            $("#purchaseSupplierName").val(data.purchaseSupplierName);
            $("#purchaseNum").val(data.purchaseNum);
            $("#unitPrice").val(data.unitPrice);
            $("#totalPrice").val(data.totalPrice);
            $("#purchaseTime").val(data.purchaseTime);
            $("#status").val(data.status);
            $("#note").val(data.note);
          },
        });
      } else if(obj.event === 'del'){
        layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
          obj.del(); // 删除对应行（tr）的DOM结构
          align: 'right'; // 右对齐弹出
          style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
          $.ajax({
            type:'post',
            url:"http://localhost:8080/jxc01/deletprocurement?id="+data.id,
            dataType:"json"
          })
          window.location.href="caigou.html"
          layer.close(index);
        });
      }else if(obj.event === 'in'){
        align: 'right'; // 右对齐弹出
        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式

      }else if(obj.event === 'back'){
        align: 'right'; // 右对齐弹出
        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
      }

    });


  });

</script>
</html>